<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html ng-app="LeaderboardApp">
<head>
<meta charset="UTF-8">
<title>Administración de Grupos de Productos</title>
<link href="/Leaderboard/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/bootstrap-spinner.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/datepicker3.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/select2.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/select2-bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/styles.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/respond.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/bootstrap3-typeahead.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/jquery.spinner.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/locales/bootstrap-datepicker.es.js"></script>

<!--[if lt IE 9]><script type="text/javascript" src="/Leaderboard/js/lib/angularjs/html5shiv-printshiv.min.js"></script><![endif]-->
<!--[if lt IE 8]><script type="text/javascript" src="/Leaderboard/js/lib/angularjs/json3.min.js"></script><![endif]-->

<script type="text/javascript" src="/Leaderboard/js/lib/select2.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/angularjs/angularjs-1.2.16.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.init.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.admin.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.gruposProductos.js"></script>

<!--[if lte IE 8]>
<script type="text/javascript">
    $(document).ready(function() {
        angular.bootstrap(document);
    });
</script>
<![endif]-->
</head>
<body>
	<div ng-include="'/Leaderboard/include/header.html'"></div>
	
	<div class="container">
		<div ng-include="'/Leaderboard/include/changePassword.html'"></div>
	
		<div ng-controller="gruposProductosCtrl">
			<div ng-include="'/Leaderboard/include/messages.html'"></div>
			<div class="panel panel-primary">
				<div class="panel-heading"><h3 class="panel-title">Administraci&oacute;n de Grupos de Productos</h3></div>
				<div class="panel-body panel-body-scrollable">
					<table class="table table-striped table-condensed table-bordered" ng-table="tableParams">
						<thead><tr><th>ID</th><th>Nombre</th><th>Productos asociados</th><th>Modalidad productos</th><th colspan="2">Acciones</th></tr></thead>
						<tbody><tr ng-repeat="gPrd in gruposProductos | filter:filterText">
							<td>{{gPrd.gPrdId}}</td><td>{{gPrd.name}}</td><td>{{gPrd.prdQty}} productos</td><td>{{gPrd.nombreModalidad}}</td>
							<td>
								<span>
									<a class="link float-left" href="javascript:void(0);" ng-click="openGPrdDialog('edit', gPrd)">Editar</a>
									&nbsp;
									<a class="link float-left" href="javascript:void(0);" ng-click="delGrupoProducto(gPrd.gPrdId)">Borrar</a>
								</span>
							</td>
						</tr></tbody>
					</table>
					<div class="wrap-center">
						<ul class="pagination">
							<li ng-class="grpPaginator.hasPrevClass()"><a href="javascript:void(0);" ng-click="grpPaginator.first(); getGruposProductos();">[ &laquo;</a></li>
							<li ng-class="grpPaginator.hasPrevClass()"><a href="javascript:void(0);" ng-click="grpPaginator.prev(); getGruposProductos();">&laquo;</a></li>
							<li ng-class="grpPaginator.itemClass(pg)" ng-repeat="pg in grpPaginator.pages()"><a href="javascript:void(0);" ng-click="grpPaginator.toPage(pg); getGruposProductos();">{{grpPaginator.itemDesc(pg)}}</a></li>
							<li ng-class="grpPaginator.hasNextClass()"><a href="javascript:void(0);" ng-click="grpPaginator.next(); getGruposProductos();">&raquo;</a></li>
							<li ng-class="grpPaginator.hasNextClass()"><a href="javascript:void(0);" ng-click="grpPaginator.last(); getGruposProductos();">&raquo; ]</a></li>
						</ul>
					</div>
				</div>
				<div class="panel-footer">
					<input id="grpPrdSearch" name="grpPrdSearch" class="form-control search-box" ng-model="grpPaginator.filter" ng-enter="grpPaginator.toPage(1); getGruposProductos();" />
					<button type="button" class="btn btn-default" ng-click="getGruposProductos()">Refrescar</button>
					<button type="button" class="btn btn-primary" ng-click="openGPrdDialog('add', null)">Agregar nuevo</button>
					<button type="button" class="btn btn-default" ng-click="openImportDialog()">
						<img src="/Leaderboard/images/page_excel.png" style="margin-top: -2px">
						Cargar desde Excel
					</button>
				</div>
			</div>
	
			<div class="modal fade" id="dlgAddEditGPrd" role="dialog" aria-labelledby="dlgAddEditGPrd" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<form id="addGPrdForm" name="addGPrdForm" class="form-horizontal" role="form">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title">Agregar/Editar Grupo de Productos</h4>
							</div>
							<div class="modal-body">
								<div ng-include="'/Leaderboard/include/modalMessages.html'"></div>
								<div class="form-group">
									<label for="txtNombre" class="col-sm-2 control-label">Nombre</label>
									<div class="col-sm-10">
										<input id="txtNombre" name="nombre" class="form-control" type="text" maxlength="45" width="45" 
												ng-model="addGPrdData.name" autofocus required ng-disabled="loading" autofocus />
									</div>
								</div>
								<div class="form-group">
									<label for="cmbModalidad" class="col-sm-2 control-label">Modalidad</label>
									<div class="col-sm-10">
										<select id="cmbModalidad" name="modalidad" class="form-control" ng-model="modalidad" ng-options="modalidad.descripcion  for modalidad in modalidades" ng-required ng-disabled="loading">
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="lstProductos" class="col-sm-2 control-label">Productos</label>
									<div class="col-sm-10">
										<div class="lst-chx-container form-control">
											<table class="table table-striped table-condensed table-bordered">
												<thead><tr><th>Producto</th><th>Cantidad</th></tr></thead>
												<tbody><tr ng-repeat="prd in productos">
													<td><input type="checkbox" ng-model="prd.selected" ng-disabled="loading" ng-click="toggleSelectPrd(prd)" /> {{prd.id}} - {{prd.name}}<br/></td>
													<td class="input-append spinner" data-trigger="spinner">
														<input type="text" class="form-control" ng-show="prd.selected" ng-required="prd.selected" ng-model="prd.qty" maxlength="3" width="3" data-rule="percent" ng-blur="updateQtyPrd(prd)"/>
													</td>
												</tr></tbody>
											</table>
											<div class="wrap-center">
												<ul class="pagination pagination-sm modal-pagination">
													<li ng-class="paginator.hasPrevClass()"><a href="javascript:void(0);" ng-click="paginator.first(); getProductos();">[ &laquo;</a></li>
													<li ng-class="paginator.hasPrevClass()"><a href="javascript:void(0);" ng-click="paginator.prev(); getProductos();">&laquo;</a></li>
													<li ng-class="paginator.itemClass(pg)" ng-repeat="pg in paginator.pages()"><a href="javascript:void(0);" ng-click="paginator.toPage(pg); getProductos();">{{paginator.itemDesc(pg)}}</a></li>
													<li ng-class="paginator.hasNextClass()"><a href="javascript:void(0);" ng-click="paginator.next(); getProductos();">&raquo;</a></li>
													<li ng-class="paginator.hasNextClass()"><a href="javascript:void(0);" ng-click="paginator.last(); getProductos();">&raquo; ]</a></li>
												</ul>
											</div>
										</div>
										<div class="filter-select">
											<input id="filterProducts" type="text" class="form-control" ng-model="paginator.filter" placeholder="Escriba producto a buscar y presione ENTER" ng-enter="paginator.toPage(1); getProductos();" />
											Seleccionar&nbsp;
												<a class="link" href="javascript:void(0);" ng-click="selectAllPrd()">todos</a>&nbsp;
												<a class="link" href="javascript:void(0);" ng-click="selectNonePrd()">ninguno</a>
										</div>
									</div>
								</div>
							</div>
							 <div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
								<button type="submit" class="btn btn-primary" ng-click="saveGrupoProducto()" ng-disabled="loading || addGPrdForm.$invalid">Guardar cambios</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			
			<div class="modal fade" id="dlgImportProducts" role="dialog" aria-labelledby="dlgImportProducts" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<form id="importProductsForm" name="importProductsForm" class="form-horizontal" role="form" method="post" action="/Leaderboard/FileUploadServlet/uploadProductos" enctype="multipart/form-data">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title">Importar Productos</h4>
							</div>
							<div class="modal-body">
								<div ng-include="'/Leaderboard/include/modalMessages.html'"></div>
								<div class="form-group">
									<label for="upldFile" class="col-sm-4 control-label">Grupo de Productos</label>
									<div class="col-sm-8">
										<select id="cmbGprds" name="gPrdId" class="form-control" ng-model="gPrdToUpload" ng-options="gPrd.name for gPrd in gruposProductos" ng-required ng-disabled="loading">
										</select>
									</div>
								</div>
								<div class="form-group">
									<label for="upldFile" class="col-sm-4 control-label">Seleccionar archivo</label>
									<div class="col-sm-8">
										<input id="upldFile" name="fileName" class="form-control" type="file" accept="application/vnd.ms-excel" ng-disabled="loading" required />
										<span class="help-block">*Cargar archivos de tipo XLS o XLSX no mayores a 10MB</span>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
								<button type="button" class="btn btn-primary" ng-click="submitCargaProductos()" ng-disabled="loading || importProductsForm.$invalid">Cargar productos</button>
							</div>
						</form>
					</div>
				</div>
			</div>
	
		</div>
	</div>
</body>
</html>